<template>
  <main class="about">
    <a-carousel autoplay>
      <a-image alt="cover" :src="cover" class="a-image"> </a-image>
      <a-image alt="cover" :src="cover2" class="a-image"> </a-image>
      <a-image alt="cover" :src="cover3" class="a-image"> </a-image>
    </a-carousel>
    <a-card hoverable class="a-cardBackgrounColor">
      <template class="ant-card-actions" #actions>
        <section v-for="action of actions" :key="action.text">
          {{ action.text }}
        </section>
      </template>
<a-card-meta :title="title" :description="description"> </a-card-meta>
</a-card>
</main>
</template>
<script>
    //引入about.js
    import {
        aboutViewConfig
    } from "@vp/show/about.js";
    export default {
        components: {},
        setup() {
            const {
                cover,
                cover2,
                cover3,
                title,
                description,
                actions,
            } = aboutViewConfig;
            return {
                cover,
                cover2,
                cover3,
                title,
                description,
                actions,
            };
        },
    };
</script>

<style scoped>
    /* For demo */
    
    .ant-carousel /deep/ .slick-slide {
        text-align: center;
        overflow: hidden;
    }
    
    .ant-carousel /deep/.slick-slide h3 {
        color: black;
    }
    
    .about {
        text-align: center;
    }
    /*  */
    
    .a-cardBackgrounColor /deep/ .ant-card-body {
        background-color: rgb(128, 56, 56);
    }
</style>